<template>
  <PageLayout
    title="示例页面"
    subtitle="这是一个使用页面模板的示例"
    icon="fa fa-cog"
  >
    <!-- 工具栏左侧 -->
    <template #toolbar-left>
      <el-button type="primary" @click="showCreateDialog = true" class="tech-button">
        <i class="fa fa-plus"></i> 新建
      </el-button>
    </template>

    <!-- 工具栏右侧 -->
    <template #toolbar-right>
      <el-input
        v-model="searchQuery"
        placeholder="搜索..."
        style="width: 300px"
        class="tech-input"
      >
        <template #prefix>
          <i class="fa fa-search"></i>
        </template>
      </el-input>

      <el-button @click="refreshData" class="tech-button">
        <i class="fa fa-refresh"></i> 刷新
      </el-button>
    </template>

    <!-- 主要内容 -->
    <template #content>
      <DataTable
        :data="tableData"
        :loading="loading"
        :view-mode="viewMode"
        @view-change="handleViewChange"
        empty-title="暂无数据"
        empty-description="点击新建按钮添加数据"
      >
        <!-- 卡片视图 -->
        <template #card-view>
          <CardGrid
            :data="tableData"
            :columns="3"
            @card-click="handleCardClick"
          >
            <template #card="{ item }">
              <div class="glass-card">
                <h3>{{ item.name }}</h3>
                <p>{{ item.description }}</p>
                <div class="card-footer">
                  <span class="environment-tag" :class="item.environment">
                    {{ item.environment_display }}
                  </span>
                </div>
              </div>
            </template>
          </CardGrid>
        </template>

        <!-- 表格视图 -->
        <template #table-columns>
          <el-table-column prop="name" label="名称" min-width="150" />
          <el-table-column prop="description" label="描述" min-width="200" />
          <el-table-column prop="environment_display" label="环境" width="120">
            <template #default="scope">
              <span class="environment-tag" :class="scope.row.environment">
                {{ scope.row.environment_display }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <el-button link size="small" @click="editItem(scope.row)" class="tech-button">
                <i class="fa fa-edit"></i> 编辑
              </el-button>
              <el-button link size="small" @click="deleteItem(scope.row)" type="danger" class="tech-button">
                <i class="fa fa-trash"></i> 删除
              </el-button>
            </template>
          </el-table-column>
        </template>
      </DataTable>
    </template>

    <!-- 对话框 -->
    <template #dialogs>
      <FormDialog
        v-model="showCreateDialog"
        :title="editingItem ? '编辑项目' : '创建项目'"
        :form-data="formData"
        :rules="formRules"
        :loading="saving"
        @confirm="saveItem"
        @cancel="resetForm"
      >
        <template #form-content>
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" placeholder="请输入名称" class="tech-input" />
          </el-form-item>

          <el-form-item label="环境" prop="environment">
            <el-select v-model="formData.environment" placeholder="请选择环境" class="tech-input" style="width: 100%">
              <el-option label="开发环境" value="dev" />
              <el-option label="测试环境" value="test" />
              <el-option label="生产环境" value="prod" />
            </el-select>
          </el-form-item>

          <el-form-item label="描述">
            <el-input
              v-model="formData.description"
              type="textarea"
              :rows="3"
              placeholder="请输入描述"
              class="tech-input"
            />
          </el-form-item>
        </template>
      </FormDialog>
    </template>
  </PageLayout>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import PageLayout from '@/components/PageLayout.vue'
import DataTable from '@/components/DataTable.vue'
import CardGrid from '@/components/CardGrid.vue'
import FormDialog from '@/components/FormDialog.vue'

// 响应式数据
const tableData = ref([])
const loading = ref(false)
const viewMode = ref('card')
const searchQuery = ref('')
const showCreateDialog = ref(false)
const editingItem = ref(null)
const saving = ref(false)

// 表单数据
const formData = reactive({
  name: '',
  environment: 'dev',
  description: ''
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' }
  ],
  environment: [
    { required: true, message: '请选择环境', trigger: 'change' }
  ]
}

// 方法
const handleViewChange = (mode: 'card' | 'table') => {
  viewMode.value = mode
}

const handleCardClick = (item: any) => {
  console.log('卡片点击:', item)
}

const refreshData = () => {
  // 刷新数据逻辑
}

const editItem = (item: any) => {
  editingItem.value = item
  Object.assign(formData, item)
  showCreateDialog.value = true
}

const deleteItem = (item: any) => {
  // 删除逻辑
}

const saveItem = () => {
  // 保存逻辑
  saving.value = true
  setTimeout(() => {
    saving.value = false
    showCreateDialog.value = false
    ElMessage.success('保存成功')
    resetForm()
  }, 1000)
}

const resetForm = () => {
  Object.assign(formData, {
    name: '',
    environment: 'dev',
    description: ''
  })
  editingItem.value = null
}
</script>

<style lang="scss" scoped>
.card-footer {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
